<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>5.6移动</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 2px solid blue;
			}
			
			.option-wrapper{
				width: 300px;
				height: 300px;
				background: "red";
			}
		</style>
	</head>

	<body>
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
			<div class="option-wrapper">
			<input type="button" name="left-btn" id="left-btn" value="向左移动" />
			<input type="button" name="right-btn" id="right-btn" value="向右移动" /><br />
			<input type="button" name="up-btn" id="up-btn" value="向上移动" />	
			<input type="button" name="down-btn" id="down-btn" value="向下移动" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			let oCanvas = document.getElementById('canvas');
			console.dir(oCanvas);
			let oPen = oCanvas.getContext("2d");
			
			oPen.fillStyle="blue";
			oPen.fillRect(0,0,50,50);
			/* 在x轴上移动x(px)，在y轴上移动y(px)
			   translate(x,y)*/
			  
			  /*oPen.translate(30,0);
			  oPen.fillStyle="red";
			  oPen.fillRect(0,0,50,50);
			  oPen.translate(30,0);
			  oPen.fillStyle="orange";
			  oPen.fillRect(0,0,50,50);*/
			  
			  let oRightBtn=document.getElementById('right-btn');
			  oRightBtn.onclick=function(){
			  	move(50,0);
			  }
			  let oDownBtn=document.getElementById('down-btn');
			  oDownBtn.onclick=function(){
			  	move(0,50);
			  }
			   let oLeftBtn=document.getElementById('left-btn');
			  oLeftBtn.onclick=function(){
			  move(-50,0);
			  }
			  let oUpBtn=document.getElementById('up-btn');
			  oUpBtn.onclick=function(){
			  	move(0,-50);
			  }
			  function move(x,y){
			  	oPen.clearRect(0,0,500,500);
			  	oPen.translate(x,y);
			  	oPen.fillStyle="blue";
			  	oPen.fillRect(0,0,50,50);
			  }
			  
		}
	</script>
	</body>

</html>